<script lang="ts" setup>
import { reactive, ref, onActivated } from 'vue'
import { useActivated } from '@/hooks/useActivated'
import { useTable } from '@/hooks/useTable'
import { queryBatteryHistory } from '@/api/cabinet'
import { queryBatteryHistoryTableCol } from '@/api/cabinet/types/cabinet'
import { getToken } from '@/utils/cache/cookies'
import { useRoute } from 'vue-router'
import { queryBoxTableCol } from '@/api/cabinet/types/cabinet'
import CabinetInfo from '@/components/dialog/CabinetInfo.vue'
import { formatterPower } from '@/utils/formatter'
defineOptions({
  name: 'UserHdRecord'
})
const route = useRoute()
const form = reactive({
  type: '',
  boxId: route.query.boxId,
  startTime: '',
  endTime: '',
  userId: route.query.userId,
  orderId: route.query.orderId
})
const { data, loading, load, pagination, handleCurrentChange, handleSizeChange } =
  useTable<queryBatteryHistoryTableCol>(queryBatteryHistory, getToken() ?? '', () => form)
onActivated(() => {
  form.boxId = (route.query.boxId as string) || ''
  form.userId = (route.query.userId as string) || ''
  form.orderId = (route.query.orderId as string) || ''
})
useActivated(
  form,
  { form },
  [
    { key: 'type', path: 'form.type' },
    { key: 'boxId', path: 'form.boxId' },
    { key: 'startTime', path: 'form.startTime' },
    { key: 'endTime', path: 'form.endTime' },
    { key: 'userId', path: 'form.userId' },
    { key: 'orderId', path: 'form.orderId' }
  ],
  load,
  []
)
/** 电柜信息 */
const boxId = ref<number>(0)
const cabinetInfoRef = ref<InstanceType<typeof CabinetInfo> | null>(null)
const showCabinetInfo = (row: queryBoxTableCol) => {
  cabinetInfoRef.value?.setId(row.boxId)
  cabinetInfoRef.value?.open()
}
</script>

<template>
  <div class="xy-container">
    <el-table :data="data" v-loading="loading" class="no-border">
      <el-table-column prop="boxCode" label="电柜编号" align="center" />
      <el-table-column prop="userId" label="手机号" align="center" />
      <el-table-column prop="type" label="操作类型" align="center" />
      <el-table-column prop="doorNumber" label="对应仓门" align="center" />
      <el-table-column
        prop="batteryPowerLevel"
        label="电量"
        align="center"
        :formatter="formatterPower"
      />
      <el-table-column prop="createdTime" label="操作时间" align="center" />
      <el-table-column label="电柜信息" align="center">
        <template #default="scope">
          <el-button link type="primary" class="is-open" @click="showCabinetInfo(scope.row)"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <cabinet-info ref="cabinetInfoRef" :boxId="boxId" />
    <div flex justify-end mt-20>
      <el-pagination
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        v-model:current-page="pagination.pageNum"
        v-model:page-size="pagination.pageSize"
        background
        :total="pagination.total"
        layout="total,prev,pager,next,jumper,sizes"
      />
    </div>
  </div>
</template>

<style scoped></style>
